<template>
	<view>
		<view class="detail-info-card">
			<view class="detail-list">
				<view class="list">
					<view class="list-left">
						承办人
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
					手机
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入"  placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
						身份证号
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list clrea-show">
					<view class="list-left">
						代办地址
					</view>
					<view class="list-right">
						<view class="uni-list-cell-db">
							<picker mode = region @change="bindPickerChange" :value="index">
									<view class="" v-if="regionList.length==0">
										<text>请选择</text>
										<uni-icons type="right" color="#717171" size="20"></uni-icons>
									</view>
									<view class="uni-input" v-else>{{ regionList[0]+','+regionList[1]+','+regionList[2]}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
						推荐人
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				
				<view class="list clrea-show">
					<view class="list-left">
						小主人星级
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
						毕业学校
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list">
					<view class="list-left">
						最高学历
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list flex-wrap">
					<view class="list-left">
						承办家宴优势资源
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list flex-wrap clrea-show">
					<view class="list-left">
						主持人简历及现在的工作状况
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
				<view class="list flex-wrap">
					<view class="list-left">
						女主人简历及现在的工作状况
					</view>
					<view class="list-right">
						<input type="text" value="" placeholder="请输入" placeholder-class="grlob"/>
					</view>
				</view>
			</view>
			<view class="send-btn">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				regionList:[]
			};
		},
		methods:{
			 bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.regionList = e.detail.value
			        },
		}
	}
</script>

<style lang="less">
.detail-info-card{
		width: 95%;
		min-height: 0;
		padding: 10rpx;
		background-color: #FFFFFF;
		margin: 2% auto;
		margin-bottom: 150rpx;
		border-radius: 25rpx;
		.detail-list{
			width: 100%;
			padding-left:18rpx;
			.list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 0;
				box-shadow: 0  1rpx #d3d3d3;
				.list-left{
					color: #5d5d5d;
					font-size: 0.9rem;
				}
				.list-right{
					color: #cecece;
					// font-weight: 600;
					.grlob{
						color: #cecece;
					}
					input{
						text-align: right;
					}
				}
				.list-right-type{
					width: 60%;
					display: flex;
					flex-wrap: wrap;
					// justify-content:space-around;
					.list-type{
						width: 45%;
						margin: 1% 2.5%;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f9d7d9;
						font-weight: 600;
						border-radius: 30rpx;
					}
				}
			}
			.flex-wrap{
				display: flex;
				flex-wrap: wrap;
				.list-right{
					width: 100%;
					margin: 2% 0;
					input{
						width: 100%;
						text-align: left;
					}
				}
			}
			.clrea-show{
				box-shadow: 0 0 0 #000000;
			}
		}
	}
 .send-btn{
	 position: fixed;
	 bottom: 3%;
	 width: 95%;
	 height: 80rpx;
	 color: #FFFFFF;
	 background-color: #994275;
	 border-radius: 80rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 // font-size: 1rem;
	 left: 50%;
	 transform: translateX(-50%);
 }
</style>
